<template>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="roleId" label="角色编号" width="150" />
      <el-table-column prop="roleName" label="角色名称" width="150" />
      <el-table-column prop="roleState" label="角色状态" width="150" >
        <template #default="{row}">
            <el-tag
      :key="row.label"
      size="large"
      :type="row.roleState?'success':'danger'"
      effect="dark"
    >
      {{ row.roleState?"启用":"禁用" }}
    </el-tag>
        </template>
        </el-table-column>
      <el-table-column  label="操作" >
        <template #default="{row}">
            <el-button type="primary" @click="roleper(row.roleId)">权限配置</el-button>
        </template>
        </el-table-column>
    </el-table>
    <table>
        <tr>
            <td>
                <el-pagination
      v-model:current-page="page.PageIndex"
      v-model:page-size="page.PageSize"
      :page-sizes="[1, 2, 3, 4]"
      :background="true"
      layout="slot, sizes"
      :total="page.totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
   共{{ page.totalCount }}条数据,每页{{ page.PageSize }}条数据，
   第{{ page.PageIndex }}/{{ page.totalPage }}页
  </el-pagination>
            </td>
            <td>
                <el-pagination
      v-model:current-page="page.PageIndex"
      v-model:page-size="page.PageSize"
      :page-sizes="[1, 2, 3, 4]"
      :background="true"
      layout="slot, prev, pager, next"
      :total="page.totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      prev-text="上一页"
      next-text="下一页"
    >
    <el-button type="primary"  @click="handleCurrentChange(1)" :disabled="page.PageIndex==1" >
      首页
    </el-button>
  </el-pagination>
            </td>
            <td>
                <el-pagination
      v-model:current-page="page.PageIndex"
      v-model:page-size="page.PageSize"
      :page-sizes="[1, 2, 3, 4]"
      :background="true"
      layout="slot, sizes, prev, pager, next, jumper"
      :total="page.totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    <el-button type="primary"  @click="handleCurrentChange(page.totalPage)" :disabled="page.PageIndex==page.totalPage" >
      尾页
    </el-button>
  </el-pagination>
            </td>
        </tr>
    </table>

  </template>
  
  <script lang="ts" setup>
   import axios from 'axios'
  import { reactive, ref,onMounted } from 'vue'
  import { useRouter } from 'vue-router';
  const router=useRouter();
  import { useGoodStore } from '@/stores/counter';
  const useStore=useGoodStore();

  const roleper=(rid:number)=>{
    router.push('/RolePermisisonUpdate');
    useStore.rid=rid;
  }

  const handleSizeChange = (val: number) => {
 page.PageSize=val;
 loadData();
}
const handleCurrentChange = (val: number) => {
  page.PageIndex=val;
  loadData();
}


  interface Role{
    roleId: number,
        roleName: string,
        roleState: boolean
  }
  const tableData = ref<Role[]>([])
const page=reactive({
    PageIndex:1,
    PageSize:3,
    totalCount:0,
    totalPage:0
})
onMounted(()=>{
    loadData();
})
    const loadData=()=>{
        axios.get('/api/User/RoleByPage',{
            params:{
                PageIndex:page.PageIndex,
                PageSize:page.PageSize
            }
        })
        .then(res=>{
            tableData.value=res.data.data.data;
            page.totalCount=res.data.data.totalCount;
            page.totalPage=res.data.data.totalPage;
        })
    }

  </script>
  